<template>
    <el-card class="box-card">
        <el-form :model="cleanDetailsForm" ref="cleanDetailsForm" :inline="true">
            <el-form-item>
                <el-input placeholder="订单编号" v-model="cleanDetailsForm.order_code"></el-input>
            </el-form-item>
            <el-form-item>
                <el-input placeholder="商户名称" v-model="cleanDetailsForm.user_name"></el-input>
            </el-form-item>
            <el-form-item>
                <el-input placeholder="交易时间从:yyyy-MM-dd" v-model="cleanDetailsForm.txn_qteq"></el-input>
            </el-form-item>
            <el-form-item>
                <el-input placeholder="交易时间到:yyyy-MM-dd" v-model="cleanDetailsForm.txn_lteq"></el-input>
            </el-form-item>
            <el-form-item>
                <el-select v-model="cleanDetailsForm.user_type" placeholder="交易商类型">
                    <el-option v-for="item in cleanDetailsForm.user_options" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-select v-model="cleanDetailsForm.trade_type" placeholder="交易类型">
                    <el-option v-for="item in cleanDetailsForm.trade_options" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-select v-model="cleanDetailsForm.order_status" placeholder="订单状态">
                    <el-option v-for="item in cleanDetailsForm.order_options" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button>查询</el-button>
                <el-button>导出</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="cleanDetailsData" border>
            <el-table-column label="序号" prop="number" width="70"></el-table-column>
            <el-table-column label="订单编号" width="170" align="center">
                <template scope="scope">
                    <a @click="goOrderDetail" style="cursor: pointer">{{scope.row.order_code}}</a>
                </template>
            </el-table-column>
            <el-table-column label="商户代码" prop="user_code" width="100"></el-table-column>
            <el-table-column label="商户类型" prop="user_type" width="100"></el-table-column>
            <el-table-column label="商户名称" prop="user_name" show-overflow-tooltip=true></el-table-column>
            <el-table-column label="交易类型" prop="trade_type" show-overflow-tooltip=true></el-table-column>
            <el-table-column label="交易金额" prop="trade_price" show-overflow-tooltip=true></el-table-column>
            <el-table-column label="金额" prop="total_price" show-overflow-tooltip=true></el-table-column>
            <el-table-column label="交易时间" prop="trade_time" show-overflow-tooltip=true></el-table-column>
        </el-table>
        <el-col :span="24" class="toolPage">
            <el-pagination :current-page="page.current" :page-sizes="[10, 20, 50, 100]" :page-size="page.size" layout="total, sizes, prev, pager, next, jumper"
                :total="page.total" style="float:right" @size-change="handleSizeChange" @current-change="handlePageChange">
                </el-pagination>
        </el-col>
    </el-card>
</template>
<script>
    export default {
        data() {
            return {
                cleanDetailsForm: {
                    order_code: '',
                    user_name: '',
                    txn_qteq: '',
                    txn_lteq: '',
                    user_type: '',
                    trade_type: '',
                    order_status: '',
                    user_options: [
                        {
                            value: '选项1',
                            label: '全部类型'
                        }, {
                            value: '选项2',
                            label: '大B'
                        }, {
                            value: '选项3',
                            label: '小b'
                        }
                    ],
                    trade_options: [
                        {
                            value: '选项1',
                            label: '全部类型'
                        }, {
                            value: '选项2',
                            label: '大B'
                        }, {
                            value: '选项3',
                            label: '小b'
                        }
                    ],
                    order_options: [
                        {
                            value: '选项1',
                            label: '全部类型'
                        }, {
                            value: '选项2',
                            label: '大B'
                        }, {
                            value: '选项3',
                            label: '小b'
                        }
                    ]
                },
                cleanDetailsData: [
                    {
                        number: '1',
                        order_code: '2001612064340007',
                        user_code: '45',
                        user_type: '大B',
                        user_name: '请的等会发你',
                        trade_type: '同意退款',
                        trade_price: '222',
                        total_price: '3333333',
                        trade_time: '2017年2月23日 16:04'
                    }
                ],
                page: {
                    total: 0,
                    current: 1,
                    size: 10,
                },
            }

        },
        methods: {
            goOrderDetail() {
                this.$router.push(`orders`);
            },
            handleSizeChange(size) {
                this.page.size = size
                // this.loadGridData()
            },
            handlePageChange(current) {
                this.page.current = current
                // this.loadGridData()
            },
        }
    }

</script>